<template>
	<view v-if="$slots.default" @tap="open()">
		<slot />
	</view>
	<view v-else class=" gui-flex gui-space-between gui-align-items-center" @tap="open()">
		<view style="position: relative;" class="gui-flex1">
			<view style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;opacity: 0;z-index: 10;" @tap="open()">
			</view>
			<input :placeholder-class="placeholderClass" type="text" :class="inputClass"
				class="gui-form-input  gui-ellipsis" v-model="val" disabled :placeholder="placeholder" />
		</view>
		<text :class="iconClass" class="gui-form-icon gui-icons gui-text-center ">&#xe603;</text>
	</view>


	<gui-area-picker :show-last="showLast" :level="level" ref="graceAddressPicker2" @confirm="confirm2"
		:value="val1"></gui-area-picker>
</template>

<script>
	export default {
		name: "hyb-city",
		props: {
			name: {
				type: String,
				default: ""
			},

			placeholder: {
				type: String,
				default: "请选择地址"
			},

			level: {
				type: Number,
				default: 3
			},

			onlyRegion: {
				type: Boolean,
				default: false
			},

			onlyShowRegion: {
				type: Boolean,
				default: false
			},
			showLast: {
				type: Boolean,
				default: true
			},
			tag: {
				type: Number,
				default: 0
			},

			modelValue: {
				type: String,
				default: ""
			},


			placeholderClass: {
				type: String,
				default: () => {
					return "";
				}
			},
			inputClass: {
				type: Array,
				default: () => {
					return [''];
				}
			},
			iconClass: {
				type: Array,
				default: () => {
					return ['gui-color-gray'];
				}
			},
			flag: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				val: '',
				va1: []
			};
		},
		created() {
			let that = this;
			if (this.onlyShowRegion) {
				let vals = this.modelValue.split('-');
				this.val = vals[vals.length - 1]
			} else {
				this.val = this.modelValue
			}

		},

		watch: {
			modelValue(value) {
				if (!this.onlyRegion) {
					this.val = value;
				}


				if (this.onlyShowRegion) {
					let vals = value.split('-');
					this.val = vals[vals.length - 1];
				}
			}
		},

		methods: {

			getMapLocation() {
				let that = this
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						setTimeout(() => {
							this.val = res.address
							this.$emit('input', res.address)
							this.$emit('update:modelValue', res.address)
							that.$emit('change', res)
						}, 200)
					},
					fail: () => {
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								console.log(res);
								var status = res.authSetting;
								if (!status['scope.userLocation']) {
									// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title: "是否授权当前位置",
										content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success: (tip) => {
											if (tip.confirm) {
												// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: (data) => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (data
															.authSetting[
																'scope.userLocation'
															] === true
														) {
															uni.showToast({
																title: "授权成功",
																icon: "success",
																duration: 1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (
																	res
																) => {
																	console
																		.log(
																			"详细地址",
																			res
																		);
																	// this.getRegionFn(res);
																	setTimeout
																		(() => {
																				this.val =
																					res
																					.address
																				this.$emit(
																					'input',
																					res
																					.address
																				)
																				this.$emit(
																					'update:modelValue',
																					res
																					.address
																				)
																				that.$emit(
																					'change',
																					res
																				)
																			},
																			200
																		)
																}
															})
														} else {
															uni.showToast({
																title: "授权失败",
																icon: "none",
																duration: 1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title: "调用授权窗口失败",
									icon: "none",
									duration: 1000
								})
							}
						})
					}
				});
			},


			open: function() {
				if (this.tag == 1) {
					this.getMapLocation()
				} else {
					this.$refs.graceAddressPicker2.open();
				}

			},
			confirm2: function(e) {
				// 返回选中城市的编号及文本信息

				let val1 = ""
				if (e == '全部') {
					val1 = "全部"
				} else {
					let val = e.names[0]

					if (this.level > 1) {
						val += ('-' + e.names[1])
					}

					if (this.level > 2) {
						val += ('-' + e.names[2])
					}

					this.val1 = e.names;
					if (this.onlyRegion) {
						val1 = e.names[this.level - 1];
					} else {
						val1 = val;
					}


					if (this.onlyShowRegion) {
						this.val = e.names[this.level - 1];
					}
				}


				setTimeout(() => {
					this.val = val1
					if (val1 == '全部') val1 = ''
					this.$emit('input', val1)
					this.$emit('update:modelValue', val1)
					this.$emit('change', val1)
				})
			},
		}
	}
</script>

<style>
</style>